<template>
<div class="login_container">
    <div class="loginColumns animated fadeInDown">
        <div class="row">
            <div class="col-md-6 welcome">
                <h2 class="font-bold">欢迎登录编码枪系统</h2>
                <p>本系统能够使你快速构建后台，减少程序员工作量</p>
            </div>
            <div class="col-md-6">
                <div class="ibox-content">
                  <el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px" class="login_form">
                    <!-- 用户名 -->
                    <el-form-item prop="userName">
                      <el-input
                        v-model="loginForm.userName"
                        prefix-icon="el-icon-user-solid"
                      ></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                      <el-input
                        type="password"
                        v-model="loginForm.password"
                        prefix-icon="el-icon-lock"
                      ></el-input>
                    </el-form-item>
                    <!-- 验证码 -->
                    <el-form-item prop="captcha">
                      <el-input
                      type="text"
                        v-model="loginForm.captcha"
                        prefix-icon="el-icon-info"
                      ></el-input>
                    </el-form-item>
                    <a href="javascript:;">
                            <img alt="如果看不清楚，请单击图片刷新！" class="pointer img" :src="captcha" style="height: 34px;" @click="getCaptcha()">
                    </a>
                    <!-- 按钮区域 -->
                    <button class="loginBtn" @click="login">登录</button>
                    <a href="javascript:;" class="forgetPwd" @click="forgetPwd">
                      <small>忘记密码？</small>
                    </a>
                    <p class="noAccount">还没有账号？</p>
                    <button class="loginBtn registerBtn" @click="register">注册一个账号</button>
                  </el-form>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../../node_modules/bootstrap/dist/js/bootstrap.min.js'
import '../../node_modules/font-awesome/css/font-awesome.min.css'
export default {
  data() {
    return {
      // 登录表单的数据绑定对象
      loginForm: {
        userName: 'admin',
        password: '123456',
        captcha: ''
      },
      // 表单的验证规则对象
      loginFormRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ]
      },
      captcha: ''
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm() {
      // console.log(this); 表单实例对象
      this.$refs.loginFormRef.resetFields()
    },
    login() {
      // 登录预验证
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const resCaptcha = await this.$http.post('/sysLogin/captcha',this.loginForm.captcha,{"headers": {"Content-Type": "application/json"}})
        // console.log(resCaptcha)
        const res = await this.$http.post('/sysLogin/login', this.loginForm)
        // console.log(res)
        // return false
        if (res.data.type !== 'success') return this.$message.error('登陆失败')
        else this.$message.success('登陆成功')
        // 1．将登录成功之后的 token，保存到客户端的sessionstorage中
        // 1.1项目中出了登录之外的其他API接口，必须在登录之后才能访问
        // 1.2 token 只应在当前网站打开期间生效，所以将 token保存在 sessionStorage中
        // window.sessionStorage.setItem('token', res.data.token)
        // 页面跳转
        this.$router.push('/index')
      })
    },
    register() {
        this.$router.push('/register')
      },
    async getCaptcha() {
      const res =await this.$http.get('/sysLogin/captcha.jpg',{responseType: 'blob'})
      this.captcha = window.URL.createObjectURL(res.data)
    },
    forgetPwd() {
      this.$router.push('/forgetPassword')
    }
},
mounted() {
  this.getCaptcha()
}
}
</script>
<style lang="less" scoped>
.login_container {
  height: 100%;
  width: 100%;
  background-color: #F3F3F4;
  .loginColumns {
    max-width: 800px;
    margin: 0 auto;
    padding: 100px 20px 20px 20px;
    .welcome {
        color: #676a6c;
        .font-bold {
            font-weight: 600;
            font-family: inherit;
            font-size: 24px;
          }
    }
  }
}
.login_container::before {
  content:"";
  display:table;
}
.ibox-content {
  clear: both;
  background-color: #ffffff;
  color: inherit;
  padding: 26px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.loginBtn {
  width: 100%;
  height: 26px;
  border-radius: 3px;
  margin-top: 10px;
  line-height: 0px;
  color: #fff;
  background-color: #1BB394;
  font-size: 13px;
  border: none;
}
.registerBtn {
  color: #8A8C8E;
  background-color: #FFFFFF;
  border-color: #D2D2D2;
  border: 1px solid #ccc;
}
.forgetPwd {
  margin-top: 10px;
}
.noAccount {
  width: 100%;
  height: 20px;
  color: #888888;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

</style>
